${define "content"}
<main class="md:container md:mx-auto p-10">
  <div class="flex items-center justify-center mb-20">
    <img class="w-10 h-10" src="/public/img/logo.png" alt="" />
    <h1 class="text-2xl ml-2">Gofar Install</h1>
  </div>
  <p class="err-info text-red-400"></p>
  <h1 class="text-xl my-2 text-gray-400">管理员设置：</h1>
  <ul class="flex">
    <li class="w-5/12 mr-10 my-2 flex items-center">
      <label class="w-20 text-right" for="account">账号：</label>
      <input
        value="admin"
        id="account"
        class="border rounded px-3 py-2 flex-1"
        type="text"
      />
    </li>
    <li class="w-5/12 mr-10 my-2 flex items-center">
      <label class="w-20 text-right" for="pass">密码：</label>
      <input
        id="pass"
        class="border rounded px-3 py-2 flex-1"
        type="password"
      />
    </li>
  </ul>
  <div class="mt-10"></div>
  <h1 class="text-xl my-2 text-gray-400">数据库设置：</h1>
  <ul class="flex flex-wrap">
    <li class="w-5/12 mr-10 my-2 flex items-center">
      <label class="w-20 text-right" for="type">类型：</label>
      <select class="border rounded px-3 py-2 flex-1" name="type" id="type">
        <option value="mysql">mysql</option>
        <option value="postgres">postgres</option>
        <option value="sqlserver">sqlserver</option>
      </select>
    </li>
    <li class="w-5/12 mr-10 my-2 flex items-center">
      <label class="w-20 text-right" for="host">连接地址：</label>
      <input
        value="127.0.0.1"
        id="host"
        class="border rounded px-3 py-2 flex-1"
        type="text"
      />
    </li>
    <li class="w-5/12 mr-10 my-2 flex items-center">
      <label class="w-20 text-right" for="user">用户名：</label>
      <input
        value="root"
        id="user"
        class="border rounded px-3 py-2 flex-1"
        type="text"
      />
    </li>
    <li class="w-5/12 mr-10 my-2 flex items-center">
      <label class="w-20 text-right" for="passwd">密码：</label>
      <input
        id="passwd"
        class="border rounded px-3 py-2 flex-1"
        type="password"
      />
    </li>
    <li class="w-5/12 mr-10 my-2 flex items-center">
      <label class="w-20 text-right" for="port">端口号：</label>
      <input
        value="3306"
        id="port"
        class="border rounded px-3 py-2 flex-1"
        type="number"
      />
    </li>
    <li class="w-5/12 mr-10 my-2 flex items-center">
      <label class="w-20 text-right" for="dbname">数据库名：</label>
      <input id="dbname" class="border rounded px-3 py-2 flex-1" type="text" />
    </li>
  </ul>
  <div class="flex justify-center">
    <button
      id="install"
      class="bg-green-400 text-white rounded px-10 py-2 my-20 mx-auto"
    >
      安装
    </button>
  </div>
</main>
<script src="https://cdn.bootcdn.net/ajax/libs/jshashes/1.0.8/hashes.min.js"></script>
<script>
  const SALT = "_gofar";
  function getEle(id) {
    return {
      key: id,
      ele: document.querySelector("#" + id),
    };
  }
  const eles = [
    getEle("account"),
    getEle("pass"),
    getEle("type"),
    getEle("host"),
    getEle("user"),
    getEle("passwd"),
    getEle("port"),
    getEle("dbname"),
  ];
  const errInfo = document.querySelector(".err-info");
  const valMap = {};
  let noPass = false;
  document.querySelector("#install").addEventListener("click", () => {
    noPass = false;
    for (const { key, ele } of eles) {
      const v = ele.value;
      if (!v) {
        ele.classList.add("border-red-500");
        noPass = true;
        continue;
      }
      ele.classList.remove("border-red-500");
      valMap[key] = v;
    }
    if (noPass) return;
    valMap.port = valMap.port - 0;
    const { account, pass, ...database } = valMap;
    const user = {
      account,
      passwd: new Hashes.MD5().hex(pass + SALT),
    };
    saveHandler({ user, database });
  });
  function saveHandler(params) {
    fetch("/api/v1/install", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(params),
    })
      .then((res) => res.json())
      .then((res) => {
        if (res.code != 200) {
          errInfo.textContent = res.msg;
          return;
        }
        window.location.href = "/admin";
      })
      .catch((err) => {
        errInfo.textContent = err;
      });
  }
</script>
${end}
